<template>
  <div>
    <el-input placeholder="请输入姓名" v-model="likeName" clearable class="input">
    </el-input>
    <el-button type="primary" icon="el-icon-search" @click="search_name">搜索</el-button>
    <el-button type="primary" @click="dialog=true">新增</el-button>
    <el-table :data="userData" style="width:100%">
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <el-tag>{{scope.row.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间">
        <template slot-scope="scope">
          <el-tag>{{scope.row.create_time|formateData}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <el-tag>{{sexName[scope.row.sex]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="updateUser(scope.row)">编辑</el-button>
          <el-button type="text" @click="delUser(scope.row.user_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="changeMaxSize" @current-change="changePageSize" :current-page="currentPage"
      :page-sizeS="pageSizes" :page-size="pageSize" layout="total,sizes,prev,pager,next,jumper" :total="total">
    </el-pagination>
    <el-drawer title="新增用户!" :before-close="cancel" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer"
      ref="adddrawer">
      <!-- 表单组件 -->
      <div class="form-contaniner">
      <el-form label-position="left" :model="user" :rules="rules" ref="addUser">
        <el-form-item label="账号" prop="account">
          <el-input v-model="user.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="user.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="user.sex">
          <el-radio :label="0">保密</el-radio>
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="user.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button>取消</el-button>
          <el-button @click="addUser('addUser')">确定</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-drawer>
		<el-drawer title="修改用户!" :before-close="cancel" :visible.sync="dialog2" direction="rtl" custom-class="demo-drawer"
		  ref="updatedrawer">
		  <!-- 表单组件 -->
		  <div class="form-contaniner">
		  <el-form label-position="left" :model="user" :rules="rules" ref="updateUser">
		    <el-form-item label="账号" prop="account">
		      <el-input v-model="user.account"></el-input>
		    </el-form-item>
		    <el-form-item label="密码" prop="password">
		      <el-input v-model="user.password" show-password></el-input>
		    </el-form-item>
		    <el-form-item label="姓名" prop="name">
		      <el-input v-model="user.name"></el-input>
		    </el-form-item>
		    <el-form-item label="邮箱" prop="email">
		      <el-input v-model="user.email"></el-input>
		    </el-form-item>
		    <el-form-item label="手机号" prop="phone">
		      <el-input v-model="user.phone"></el-input>
		    </el-form-item>
		    <el-form-item label="性别">
		      <el-radio-group v-model="user.sex">
		      <el-radio :label="0">保密</el-radio>
		      <el-radio :label="1">男</el-radio>
		      <el-radio :label="2">女</el-radio>
		      </el-radio-group>
		    </el-form-item>
		    <el-form-item label="收货地址" prop="address">
		      <el-input v-model="user.address"></el-input>
		    </el-form-item>
		    <el-form-item>
		      <el-button>取消</el-button>
		      <el-button @click="updUser('updateUser')">确定</el-button>
		    </el-form-item>
		  </el-form>
		  </div>
		</el-drawer>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  export default {
    data() {
      return {
        userData: [],
        currentPage: 1,
        pageSizes: [10, 100, 200, 500, 1000],
        pageSize: 10,
        total: 400,
        sexName: ["保密", "男", "女"],
        likeName: null,
        dialog: false,
				dialog2: false,
        user: {
          account: "",
          password: "",
          name: "",
          email: "",
          phone: "",
          sex: 0,
          address: ""
        },
		rules:{
			account:[{
				required:true,message:"用户的账号不能为空",trigger:"blur"
			}],
			password:[{
				required:true,message:"用户的密码不能为空",trigger:"blur"
			}],
			name:[{
				required:true,message:"用户的姓名不能为空",trigger:"blur"
			}],
			email:[{
				type:"email",message:"用户邮箱格式不正确",trigger:"change"
			},{
				required:true,message:"用户的邮箱不能为空",trigger:"blur"
			}],
			phone:[{
				required:true,message:"用户的手机号不能为空",trigger:"blur"
			}],
			address:[{
				required:true,message:"用户的地址不能为空",trigger:"blur"
			}]
		}
      }
    },
    components: {

    },
    methods: {
      changeMaxSize(maxSize) {
        //默认接收总条数，但是我需要总条数和当前页码
        let currentPage = this.currentPage
        let likeName = this.likeName
        this.getUserData(currentPage, maxSize, likeName)
      },
      changePageSize(currentPage) {
        //默认接收的是
        let maxSize = this.pageSize;
        let likeName = this.likeName
        this.getUserData(currentPage, maxSize, likeName)
      },
      getUserData(page, maxSize, likeName) {
        let params = {
          page,
          maxSize,
          likeName
        }
        if (likeName != null && likeName != "") {
          params['likeName'] = likeName
        }
        axios.get("http://chenxueli.site:8081/ssm/selectPageUserList", {
            params
          })
          .then((res) => {

            if (res.data.resultCode == 0) {
              let data = res.data.data
              this.userData = data.list
              this.currentPage = data.pageNum
              this.pageSize = data.pageSize
              this.total = data.total
            } else {
              alter(res.data.message)
            }
          })
      },
      search_name() {
        let likeName = this.likeName
        let maxSize = 10
        let page = this.page
        this.getUserData(page, maxSize, likeName)
      },
      delUser(userId) {
        let params = {
          userId

        }
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          params = qs.stringify(params);
          axios.post("http://chenxueli.site:8081/ssm/deleteUser", params).then((res) => {
            if (res.data.resultCode === 0) {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              let page = this.currentPage
              let maxSize = this.pageSize
              let likeName = this.likeName
              this.getUserData(page, maxSize, likeName)
            } else {
              this.$message({
                type: 'error',
                message: res.data.message,
              })
            }
          })

        }).catch(() => {
          // this.$message({
          // 	type: 'info',
          // 	message: '已取消删除'
          // });
        });
      },
      //关闭抽屉
      cancel(done) {
        done();
      },
	  //添加用户
	  addUser(refName){
		  //校验
		  this.$refs[refName].validate((valid)=>{
			  if(valid){
				  //校验成功，发送请求给服务器
				  let params=this.user
				  params=qs.stringify(params)
				  axios.post("http://chenxueli.site:8081/ssm/addUser",params).then((res)=>{
						
					  if(res.data.resultCode===0){
						  this.$message({
							  type:"success",
							  message:res.data.message
						  })
						  //抽屉的内容清空
						  this.$refs[refName].resetFields()
						  //关闭抽屉
						  this.dialog=false
						  //获取第一页的数据
						  this.getUserData(1,10,null)
					  }
				  })
			  }else{
				  return false
			  }
		  })
	  },
		updateUser(row){
			let account=row.account
			let Password=row.password
			let name=row.name
			let email=row.email
			let phone=row.phone
			let sex=row.sex
			let address=row.address
			let user_id=row.user_id
			let version=row.version
			this.dialog2=true
			let user=this.user
			user.account=account
			user.password=Password
			user.name=name
			user.email=email
			user.phone=phone
			user.sex=sex
			user.address=address
			user.user_id=user_id
			user.version=version
		},
		updUser(refName){
			this.$refs[refName].validate((valid)=>{
				if(valid){
					let params=this.user
					params=qs.stringify(params)
					axios.post("http://chenxueli.site:8081/ssm/updateUser",params).then((res)=>{
						console.log(res)
					if(res.data.resultCode===0){
						this.$message({
							type:"success",
							message:res.data.message
						})
						this.$refs[refName].resetFields()
						this.dialog2=false
						this.getUserData(1,10,null)
					}	else{
						return false
					}
						
					})
				}
			})
		}
    },
    mounted() {
      this.getUserData(1, 10, null)
    },
    //过滤器
    filters: {
      formateData(date) {
        return new Date(date).toLocaleString().replace(/:\d{1,2}$/, "")
      }
    }
  }
</script>

<style scoped="scoped">
  .input {
    width: 150px;
  }
  .form-contaniner{
    width:100%;
    height:600px;
    overflow-y:scroll;
  }
</style>